<script setup>
import {onMounted, ref} from "vue";
import {createView, deleteView, listViewTree, updateView} from "../../../http/manage/view.js";
import {manageStore} from "../../../stores/counter.js";

const viewTreeFormProps = {
  children: 'children',
  label: 'name',
}

let viewTableTreeData = ref([])

let viewName = ref("")
let viewForm = ref({})
let showViewForm = ref(false)
let viewUpdate = ref(false)


function showViewCreate(view) {
  viewForm.value = view
  showViewForm.value = true
  viewUpdate.value = false
}

function showViewUpdate(view) {
  viewForm.value = view
  showViewForm.value = true
  viewUpdate.value = true
}

function handleViewSave() {
  if (viewUpdate.value){
    handleViewUpdate()
  }
  else {
    handleViewCreate()
  }
}

function handleViewCreate() {
  createView(viewForm.value).then(response => {
    handleViewTreeList(0)
    viewForm.value = {}
    showViewForm.value = false
  })
}

function handleViewUpdate() {
  updateView(viewForm.value).then(response => {
    handleViewTreeList(0)
    viewForm.value = {}
    showViewForm.value = false
  })
}

function handleViewDelete(view){
  deleteView(view.ukId).then(response => {
    handleViewTreeList(0)
  })
}

function handleViewTreeList(parentUkId){
  listViewTree(parentUkId).then(response => {
    viewTableTreeData.value = response.data
  })
}

onMounted(() => {
  handleViewTreeList("0")
})

</script>

<template>
  <div style="display: flex; flex-flow: column nowrap; width: 100%; height: 100%; overflow: hidden; padding-left: 5px; padding-right: 5px">
    <div style="display: flex; flex-flow: row nowrap; align-items: center; height: 40px; padding-left: 10px">
      <el-form :inline="true" style="height: 30px">
        <el-form-item label="视图名称">
          <el-input style="width: 200px" v-model="viewName" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleViewList">查询</el-button>
          <el-button type="primary" @click="showViewCreate({parentUkId : '0'})">新建</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
        :data="viewTableTreeData"
        style="width: 100%;"
        row-key="ukId"
        border
        default-expand-all
    >
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="type" label="类型" width="190" />
      <el-table-column prop="status" label="状态" width="70">
        <template #default="scope">
          <el-switch
              @change="viewForm = scope.row; handleViewUpdate()"
              active-value="enable"
              inactive-value="disable"
              v-model="scope.row.status "
          />
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="60"/>
      <el-table-column label="操作" width="300">
        <template #default="scope">
          <el-button @click="showViewCreate({parentUkId : scope.row.ukId})">
            新建下级视图
          </el-button>
          <el-button @click="showViewUpdate(scope.row)">
            编辑
          </el-button>
          <el-popconfirm
              width="170"
              hide-icon
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleViewDelete(scope.row)"
              :title="'是否确认删除视图数据 [ ' + scope.row.name + ' ] ？'">
            <template #reference>
              <el-button type="danger">
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog title="视图管理" v-model="showViewForm" :close-on-click-modal="false" label-width="80px">
    <el-form ref="form" :model="viewForm" label-width="80px">
      <el-form-item label="上级视图">
        <el-tree-select
            check-strictly=true
            node-key="ukId"
            v-model="viewForm.parentUkId"
            :props="viewTreeFormProps"
            :data="viewTableTreeData"
        />
      </el-form-item>
      <el-form-item label="视图名称">
        <el-input v-model="viewForm.name"></el-input>
      </el-form-item>
      <el-form-item label="视图类型">
        <el-select v-model="viewForm.type">
          <el-option label="菜单组" value="group">菜单组</el-option>
          <el-option label="菜单" value="menu">菜单</el-option>
          <el-option label="按钮" value="button">按钮</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="视图路由">
        <el-input v-model="viewForm.routeUkId"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="viewForm.status">
          <el-option
              v-for="item in manageStore().status"
              :key="item.value"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="viewForm.sort" type="number" min="0" max="90000"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleViewSave">Save</el-button>
        <el-button @click="showViewForm = false">Cancel</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<style scoped>

</style>